<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>vue</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
</head>

<body>
    <div id='app'>
        <!-- 方案1：函数体执行异步 -->
        <!-- <input type="text" @input="handleInput" v-model="myText" /> -->
        <!-- 方案2：watch -->
        <input type="text" v-model="myText" />
        <ul>
            <li v-for="data in list" :key="data">
                {{data}}
            </li>
        </ul>

        <!-- 函数表达式不支持异步 -->
        函数表达式不支持异步--myText--{{method1()}}
        <hr />
        <!-- 计算属性不支持异步 -->
        计算属性不支持异步--myText--{{computed1}}
    </div>
</body>
<script>
    // 过滤案例
    let vm = new Vue({
        el: '#app',
        data: {
            myText: "",
            list: ["aaa", "add", "bbb", "bbc", "ccc", "ddd", "eee", "ade"],
            backup: ["aaa", "add", "bbb", "bbc", "ccc", "ddd", "eee", "ade"],
        },
        watch: {
            //  mYtext(a,b)  中的  a b  可写可不写
            myText(a,b) {
                console.log('改变前'+b,'改变后'+a);
                setTimeout(() => {
                    this.list = this.backup.filter(item =>
                        item.includes(this.myText)
                    );
                }, 500);
            }
        },
        methods: {
            handleInput() {
                // console.log("input", this.myText);
                // 重新赋值
                setTimeout(() => {
                    this.list = this.backup.filter(item =>
                        item.includes(this.myText)
                    );
                }, 500);

            },
            method1() {
                // console.log('方法--');
                setTimeout(() => {
                    return this.myText + "拿了一血";
                }, 1000);
                // return this.myText + " 拿了一血";
            },
        },
        computed: {
            computed1() {
                console.log('计算属性--');
                setTimeout(() => {
                    return this.myText + "拿了一血";
                }, 1000);
                // return this.myText + " 拿了一血";
            }
        }
    });
    /*
        watch 侦听器
            1. 语法定义和函数一致
            2. 函数名和状态的属性值一致。
            3. 被监听状态的属性变化时触发。
            4. 不需要返回值
            5. 同步，异步均可
        注意：
            1. 函数表达式不支持异步  
            2. 计算属性不支持异步
        总结：
            1. data => 状态，被拦截
            2. 方法 => 事件绑定，逻辑计算，可以不用 return，没有缓存
            3. 计算属性 => 解决模板过重，必须 return，只求结果，有缓存，同步
            4. watch => 重视过程，监听状态变化，不用返回值，异步同步均可
    */
</script>

</html>